<template>
  <!-- 基本信息展示 -->
  <div>
    <div class="tit-row pd10">
      <span class="el-icon-s-custom ft-color mr5"></span>
      <span class="mr5">账户类型：{{ rolesUser | UserAdmin}}</span>
    </div>
    <div class="tit-row pd10">
      <span class="el-icon-s-flag ft-color mr5"></span>
      <span>账户状态：{{ userState | UserStateFilter}}</span>
    </div>
    <div class="divider"></div>
    <div class="user-info-title title-ht">
      <span class="tab-item cur">基本信息</span>
      <span>
        <el-button type="primary" icon="iconfont icon-user-change ft-14" :disabled="isChecking" @click="showComDialog('个人基本信息修改')">修改</el-button>
      </span>
    </div>
    <div class="user-info-box r2">
      <div class="row-item">
        <el-col :span="4" class="des-lf">姓名：</el-col>
        <el-col :span="16">{{ userInfo.merchName }}</el-col>
      </div>
      <div class="row-item">
        <el-col :span="4" class="des-lf">手机号码：</el-col>
        <el-col :span="16">{{ userInfo.phoneNo }}</el-col>
      </div>
      <div class="row-item">
        <el-col :span="4" class="des-lf">证件类型：</el-col>
        <el-col :span="14">
          <el-select v-model="userInfo.merchCertType" placeholder="请选择证件类型" disabled="disabled">
            <el-option label="身份证" value="01"></el-option>
            <el-option label="户口簿" value="02"></el-option>
            <el-option label="护照" value="03"></el-option>
            <el-option label="其他" value="04"></el-option>
          </el-select>
        </el-col>
      </div>
      <div class="row-item">
        <el-col :span="4" class="des-lf">证件号码：</el-col>
        <el-col :span="16">{{ userInfo.merchCertId }}</el-col>
      </div>
      <div class="row-item">
        <el-col :span="4" class="des-lf">身份证照：</el-col>
        <el-col :span="16">
           <div class="user-info-img cursor-hand" v-viewer>
            <img v-if="userInfo.qulifLincPic" :src="userInfo.qulifLincPic" alt="" preview="1" preview-text="身份证照">
            <img v-else src="@/assets/no-pic.png" alt="">
          </div>
        </el-col>
      </div>
      <div class="row-item">
        <el-col :span="4" class="des-lf">自拍照：</el-col>
        <el-col :span="16">
          <div class="user-info-img cursor-hand" v-viewer>
            <img v-if="userInfo.qulifShopPic" :src="userInfo.qulifShopPic" alt="" preview="2" preview-text="自拍照">
            <img v-else src="@/assets/no-pic.png" alt="">
          </div>
        </el-col>
      </div>
      <div class="row-item">
        <el-col :span="4" class="des-lf">行业类别：</el-col>
        <el-col :span="16">{{ userInfo.mcc }}</el-col>
      </div>
      <div class="row-item">
        <el-col :span="4" class="des-lf">家庭地址：</el-col>
        <el-col :span="16">
          <v-distpicker disabled="disabled" :province="userInfo.province" :city="userInfo.city" :area="userInfo.county">
          </v-distpicker>
        </el-col>
      </div>
      <div class="row-item">
        <el-col :span="4" class="des-lf">居住地址：</el-col>
        <el-col :span="16">{{ userInfo.busiAddress }}</el-col>
      </div>
    </div>
  </div>
</template>

<script>
import VDistpicker from 'v-distpicker'
export default {
  components: { VDistpicker },
  props: {
    userInfo: {},
    isChecking: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      rolesUser: localStorage.getItem('adminUser'),
      userState: localStorage.getItem('userState')
    }
  },
  created () {
  },
  methods: {
    showComDialog (val) {
      this.$emit('showComDialog', val)
    }
  }
}
</script>

<style lang="less" scoped>
</style>